<template>
    <div class="makeOver-page">
        <van-form @submit="onSubmit">
            <div class="cell-box van-hairline--surround">
                <div class="cell " @click="gotoPage('/member/makeOver')">
                        
                        <van-field
                            v-model="form.username"
                            class="input"
                            name="用户姓名"
                            placeholder="请输入用户ID号"
                            :rules="[{ required: true, message: '' }]" />
                        <p class="icon">搜索</p>
                </div>
            </div>
            <p class="title">用户姓名</p>
            <div class="cell-box van-hairline--surround">
                <div class="cell " @click="gotoPage('/member/makeOver')">
                        <!-- <div class="cell-info">
                            <p class="title">转让</p>
                        </div> -->
                        <van-field
                            v-model="form.username"
                            class="input"
                            name="用户姓名"
                            placeholder="请输入要转让的积分数额"
                            :rules="[{ required: true, message: '' }]" />
                </div>
                <div class="integral">可转让积分余额：99999.99</div>
            </div>
            <div class="fixed-button">
                <van-button 
                    size="large" 
                    class="btn1 btn home-button" 
                    native-type="submit"
                >转让积分</van-button>
            </div>
        </van-form>
        <van-popup 
            v-model="show"
            closeable
            close-icon="close"
            class="auth-code-dialog"
        >
            <div class="box">
                <p class="title">请输入验证码</p>
                <div class="hint">
                    <p>验证码已发送至以下邮箱</p>
                    <p>2443257535@qq.com</p>
                </div>
                <div class="van-hairline--surround">
                    <van-field
                        v-model="authCode"
                        class="input "
                        name="账户姓名"
                        placeholder="请输入验证码"
                        @input="changeAuthCode"
                        :rules="[{ required: true, message: '' }]"
                    />
                </div>
                <div class="error-hinr" v-show="errorInfo">{{errorInfo}}</div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import until from "../../assets/javascript/until";
export default {
    name: "bank",
    data() {
        return {
            form:{
                username: '',
                password: '', 
                repassword: '',
            },
            show: true,
            authCode: '',
            errorInfo:'验证码6位数',
            copyValue:'',
            
        };
    },
    mounted() {
     
    },
    methods: {
        changeAuthCode(value){
            let copyValue = '';
            if(value.length <= 6){
                if(value.length==6){
                    this.copyValue = value;
                    console.log(value);
                    if(value != '123456'){
                        this.errorInfo = '验证码错误';
                    }else{
                        this.authCode = value;
                        this.show = false;
                        this.$toast('修改成功');
                    }
                } else {
                    this.errorInfo = '验证码6位数';
                }
            }else{
                console.log(value);
                this.errorInfo = '验证码错误';
                this.authCode = this.copyValue;
            }
        },
        onSubmit() {
            this.authCode = '';
            this.errorInfo = '';
            this.show = true;
            this.$toast('提交成功');
        },
        onInput(value) {
            this.$toast(value);
        },
        onDelete() {
            this.$toast('删除');
        },
    }
}
</script>

<style scoped lang='scss'>
.makeOver-page{
    background: url('../../assets/image/my-bg.png') no-repeat;
    min-height: 100vh;
    padding:.3rem;
    .cell-box{
        height:.88rem;
        margin-top: .3rem;
        .integral{
            text-align: right;
            font-weight: 400;
            font-size: 0.3rem;
            color: #646464;
            margin-top: .2rem;
        }
    }
    .cell{
        padding: 0 .3rem;
        height:.88rem;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: .05rem;;
        border: 1px solid #755936;
        justify-content: space-between;
        color: #755936;
        .input{
            width: 90%;
            padding: 0;
        }
    }
    .title{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 0.3rem;
        color: #323232;
        margin-bottom:.21rem;
        margin-top: .3rem;
    }
    
    .fixed-button{
        width: 100%;
        height: 1rem;
        margin-top: 1.3rem;
        .btn{
            height: 1rem;
            border-radius: .1rem;
            font-size: .36rem;
        }
    }
}
.auth-code-dialog{
    width: 80%;
    border-radius: .2rem;
    margin: 0 auto;
    .box{
        padding: .3rem;
        
        .title{
            font-size: .36rem;
            color: #323232;
            text-align: center;
            margin-bottom: .3rem;
        }
        .hint{
            font-size: .28rem;
            color: #646464;
            text-align: center;
            margin-bottom: .3rem;
        }
        .error-hinr{
            font-size: .28rem;
            color: #FF0000;
            text-align: center;
            margin-bottom: .3rem;
        }
    }
}
</style>